<template>
    <span aria-label="Page navigation example">
        <ul class="pagination" style="float:left">
            <li class="page-item disabled">
                <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
            </li>
        </ul>

        <ul class="pagination" style="float:right">
            <li class='page-item'>
                <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                <a v-else class="page-link" @click="getPage( prePage,pageSize )">上一页</a>
            </li>

            <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                <a  class="page-link" @click="getPage(item,pageSize)">{{ item }}</a>
            </li>
            <li class= 'page-item'>
                <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                <a  v-else class="page-link" @click="getPage( nextPage,pageSize )">下一页</a>  
            </li>
        </ul>
    </span>
</template>

<script>
   

  // import {useStore} from 'vuex';
  // import {ref} from 'vue';


    export default{
    name : "PageNav",
    props:{
        isFirstPage: Number,
        isLastPage: Number,
        prePage: Number,
        nextPage: Number,
        pageSize: Number,
        totalPage: Number,
        pageNum: Number,
    },
    setup(props,context){
        
        let PageNum = 1 ;  //当前页数
        let PageSize = 6 ; //每页数据条数

        // const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
        //     PageNum = pageNum.value;
        //     PageSize = pageSize.value;
        // }

        const getPage = (PageNum, PageSize)=> {
           context.emit('getPage',PageNum,PageSize);
        }

        getPage(PageNum, PageSize);

        return {
            getPage,
        }
    }
  }
</script>
   
<style scoped>
</style>